<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2024-12-25
  Time: 15:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%-- 设置上下文路径到作用域 --%>
<c:set var="ctx" scope="request" value="${pageContext.request.contextPath}" />
<script>
    window.ctx = "${ctx}"; // 提供上下文路径给所有js
</script>
<html>
<head>
    <title>昆虫列表</title>
</head>
<body>

<style>
    .box {
        width: 600px;
        margin: 0px auto;
        text-align: center;
    }
    form,table {
        width: 100%;
    }
    #myform {
        margin-bottom: 20px;
    }
    .page {
        margin-top: 10px;
    }
    td { text-align:center; }
</style>

<div class="box">
    <h2>昆虫信息管理系统</h2>
    <form id="myform" action="${ctx}/insect/page" method="post">

        昆虫名：<input type="text" id="name" name="name" value="${name}"/>

        <select name="cid" id="cid">
            <option value="0">--请选择--</option>
            <c:forEach items="${categoryList}" var="category">
                <option value="${category.id}" ${category.id == cid ? "selected='selected'" : ""}>${category.cname}</option>
            </c:forEach>
        </select>
        <input type="hidden" id="currPageNo" name="currPageNo"/>
        <input type="submit" value="查询">&nbsp;&nbsp;
        <input type="button" value="添加" onclick="window.location.href='${ctx}/insect/toSave';">
    </form>

    <div id="return-table">
        <table border="1px">
            <thead>
            <tr>
                <th>编号</th>
                <th>分类</th>
                <th>昆虫名</th>
                <th>寿命</th>
                <th>地域分布</th>
                <th>首次发现时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
              <c:forEach items="${page.list}" var="insect">
                <tr>
                    <td>${insect.id}</td>
                    <td>${insect.insectCategory.cname}</td>
                    <td>${insect.name}</td>
                    <td>${insect.life}</td>
                    <td>${insect.area}</td>
                    <td>
                        <fmt:formatDate value="${insect.discovery_time}" pattern="yyyy-MM-dd"/>
                    </td>
                    <td>
                        <a href="${ctx}/insect/findById/${insect.id}">修改</a>
                        <a href="javascript:void(0)" onclick="del(${insect.id},this)">删除</a>
                    </td>
                </tr>
              </c:forEach>
            </tbody>
        </table>
        <div class="page">
            <a href="javascript:void(0)" onclick="toPage(1)">首页</a>
            <a href="javascript:void(0)" onclick="toPage(${page.currPageNo - 1})">上一页</a>
            <a href="javascript:void(0)" onclick="toPage(${page.currPageNo + 1})">下一页</a>
            <a href="javascript:void(0)" onclick="toPage(${page.totalPageCount})">末页</a>
            当前显示第<span>${page.currPageNo}</span>页,&nbsp;&nbsp;
            总页数<span>${page.totalPageCount}</span>页,&nbsp;&nbsp;
            共<span>${page.totalCount}</span>条记录
        </div>
    </div>
</div>

<script src="${ctx}/statics/js/jquery.js"></script>
<script>
    $(function(){
        // 隔行变色
        $("tr:odd").css("background-color", "pink");
    });

    function del(id, th) {
        if (confirm("确定要删除?")) {
            $.ajax({
                // 使用Restful风格
                url: window.ctx + "/insect/del/" + id,
                type: "GET",
                dataType: "json",
                success: function(data){
                    if(data.code == 200){
                       alert("数据删除成功！");
                       $(th).parent().parent().remove();
                    } else{
                        alert("数据删除失败，请重试！");
                    }
                }
            })
        }
    }
    function toPage(currPageNo) {
        $("#currPageNo").val(currPageNo);
        $("#myform").submit();
    }
</script>
</body>
</html>

